<template>
  <div class="app-container" v-if="!pageLoading">
    <qm-workflow ref="qmWorkflow" :rules="rules" keyProp="leaveId" :categories="['附件资料1', '附件资料2']">
      <!--自定义标单页面-->
      <!-- <template v-slot:before-form>
        <el-tab-pane label="标签页1">可以放置你自己的表单内容</el-tab-pane>
      </template>-->

      <template v-slot:form="{ model }">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="申请人：" prop="model.applyUserName">
              <el-input v-model="model.applyUserName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请时间：" prop="model.applyTime">
              <el-date-picker
                v-model="model.applyTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="申请天数：" prop="model.days">
              <el-input v-model="model.days" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="假期类型：" prop="model.leaveType">
              <el-select v-model="model.leaveType">
                <el-option value="事假" label="事假"></el-option>
                <el-option value="年假" label="年假"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="24">
            <el-form-item label="请假事由：" prop="model.reason">
              <el-input type="textarea" v-model="model.reason"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <!--自定义标单页面-->
      <!-- <template v-slot:after-form>
        <el-tab-pane label="标签页2">可以放置你自己的表单内容</el-tab-pane>
      </template>-->
    </qm-workflow>
  </div>
</template>

<script>
import Controller from "@/libs/framework/workflowController";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      //表单页面需配置的处理类
      //requestMapping的值为 /workflow/demoLeaveApply
      model: "/workflow/demoLeaveApply/getWorkflowViewModel",
    };
  }

  showLoading() {
    return false;
  }
  autoLoadDone() {
    return false;
  }

  mixin() {
    return {
      data() {
        return {
          rules: {
            model: {
              applyUserName: [
                { required: true, message: "请填写申请人", trigger: "blur" },
              ],
              applyTime: [{ required: true, message: "请选择申请时间" }],
              days: [
                { required: true, message: "请填写天数", trigger: "blur" },
              ],
              leaveType: [
                {
                  required: true,
                  message: "请选择假期类型",
                  trigger: "change",
                },
              ],
              reason: [
                { required: true, message: "请填写请假事由", trigger: "blur" },
              ],
            },
          },
          models: {
            model: {},
          },
          controlData: {
            workflow: {},
          },
          attachmentList: [],
          tableData: [],
          urls: {},
        };
      },
      mounted() {
      },
    };
  }
}
</script>

<style scoped lang="scss">
.workflow-title {
  padding: 5px 0;
}
.workflow-toolbar {
  text-align: right;
}
.workflow-content {
  margin-top: 16px;
}
</style>

